<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/case/fundList' }">公积金方案</el-breadcrumb-item>
        <el-breadcrumb-item>险种编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer editInsurancePage">
      <!-- 险种编辑表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          :model="item"
          :rules="rules"
          label-width="120px"
          label-position="left"
          ref="item"
        >
          <div class="el-form--inline">
            <el-form-item label="险种类别" prop="itemTypeCode">
              <el-select placeholder v-model="item.itemTypeCode" filterable @change="action">
                <el-option
                  :label="item.dictName"
                  :value="item.dictCode"
                  :key="item.id"
                  v-for="item in types"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收费频率" prop="payFrequencyCode">
              <DataDictSelect :data-key="40003" :p_value.sync="item.payFrequencyCode"></DataDictSelect>
            </el-form-item>
            <el-form-item label="收费规则" prop="ruleType">
              <data-dict-select :data-key="40004" :p_value.sync="item.ruleType"></data-dict-select>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="最小年龄" prop="maleAgeMin">
              <el-input v-model="item.maleAgeMin" type="number" placeholder></el-input>
            </el-form-item>
            <el-form-item label="男最大年龄" prop="maleAgeMax">
              <el-input v-model="item.maleAgeMax" type="number" placeholder></el-input>
            </el-form-item>
            <el-form-item label="女最大年龄" prop="femaleAgeMax">
              <el-input v-model="item.femaleAgeMax" type="number" placeholder></el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="单位精确度" prop="compCalAccuCode">
              <data-dict-select :data-key="40001" :p_value.sync="item.compCalAccuCode"></data-dict-select>
            </el-form-item>
            <el-form-item label="单位基数范围" prop="compBaseMin">
              <el-input
                class="num-input-groud"
                type="number"
                v-model="item.compBaseMin"
                placeholder
              ></el-input>~
              <el-input
                class="num-input-groud"
                type="number"
                v-model="item.compBaseMax"
                ref="value9"
                placeholder
              ></el-input>
            </el-form-item>
            <el-form-item label="单位比例" prop="compRatio">
              <el-input v-model="item.compRatio" type="number">
                <i class slot="suffix">%</i>
              </el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="个人精确度" prop="empCalAccuCode">
              <data-dict-select :data-key="40001" :p_value.sync="item.empCalAccuCode"></data-dict-select>
            </el-form-item>
            <el-form-item label="个人基数范围" prop="empBaseMin">
              <el-input class="num-input-groud" type="number" v-model="item.empBaseMin" placeholder></el-input>~
              <el-input
                class="num-input-groud"
                type="number"
                v-model="item.empBaseMax"
                ref="value13"
                placeholder
              ></el-input>
            </el-form-item>
            <el-form-item label="个人比例" prop="empRatio">
              <el-input v-model="item.empRatio" type="number">
                <i class slot="suffix">%</i>
              </el-input>
            </el-form-item>
          </div>
          <!-- <div class="el-form--inline">
            <el-form-item label="捆绑申报险种">
              <el-radio-group class="check-btn-groud" v-model="item.groupSourceItemCode" size="medium">
                <el-radio v-for="(item,index) in otherTypes" :label="item" :key="index">{{Gloab.dataCode[item]}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>-->
        </el-form>
      </div>
      <!-- 险种编辑表单结束 -->
      <!-- 编辑其他险种 -->
      <div class="other-insurance">
        <div class="other-insurance-item clearfix" v-show="otherTypes.length>0">
          <div class="fl">
            编辑其他险种
            <el-radio-group v-model="radioInsurance" size="small">
              <el-radio
                :label="item"
                border
                v-for="(item,index) in otherTypes"
                :key="index"
              >{{Gloab.dataCode[item]}}</el-radio>
            </el-radio-group>
          </div>
          <div class="fr">
            <div>
              <el-button class="text-danger" size="small" @click="delXz">
                <i class="iconfont icondelet"></i> 删除
              </el-button>
            </div>
            <div>
              <el-button size="small" @click="edit">
                <i class="iconfont iconedit"></i> 编辑
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 编辑其他险种结束 -->
      <div class="page-form-btn">
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import DataDictSelect from "../../components/DataDictSelect";
const binding = ["养老", "工伤"];
export default {
  name: "editInsurance",
  components: { DataDictSelect },
  data() {
    var checkMaxInput = (rule, value, callback) => {
      let maxNum = this.$refs.value9.value;
      if (
        value == "" ||
        value == null ||
        value == undefined ||
        maxNum == "" ||
        maxNum == null ||
        maxNum == undefined ||
        value > maxNum ||
        value < 0 ||
        maxNum < 0
      ) {
        return callback(new Error("请输入有效单位基数范围"));
      } else {
        callback();
      }
    };
    var checkPersonalMaxInput = (rule, value, callback) => {
      let maxNum = this.$refs.value13.value;
      if (
        value == "" ||
        value == null ||
        value == undefined ||
        maxNum == "" ||
        maxNum == null ||
        maxNum == undefined ||
        value > maxNum ||
        value < 0 ||
        maxNum < 0
      ) {
        return callback(new Error("请输入有效个人基数范围"));
      } else {
        callback();
      }
    };
    var validateOverdueFineRatio = (rule, value, callback) => {
      var pattern = /^\d+.?\d{0,2}$/;
      if (value < 0 || value > 100) {
        return callback(new Error("请输入0-100值"));
      } else if (!pattern.test(value)) {
        return callback(new Error("输入数字或小数点后最多只能输入两位"));
      } else return callback();
    };
    var checkAge = (rule, value, callback) => {
      if (value) {
        if (Number.isInteger(Number(value)) && Number(value) > 0) {
          callback();
        } else {
          callback(new Error("请输入有效年龄"));
        }
      }
    };
    return {
      // 公积金表单
      types: [],
      otherTypes: [],
      productId: this.$route.query.productId,
      item: {
        productId: this.$route.query.productId,
        itemTypeCode: "40007001",
        itemTypeName: "",
        payFrequencyCode: "40003001",
        ruleType: "",
        maleAgeMin: "",
        maleAgeMax: "",
        femaleAgeMin: "",
        femaleAgeMax: "",
        compCalAccuCode: "40001001",
        empCalAccuCode: "40001001",
        compBaseMin: "",
        compBaseMax: "",
        empBaseMin: "",
        empBaseMax: "",
        compRatio: "",
        empRatio: "",
        groupSourceItemCode: "",
        comment: ""
      },
      radioInsurance: "1",
      bindings: binding,
      // 必填项目
      rules: {
        itemTypeCode: [
          { required: true, message: "请选择险种类别", trigger: "change" }
        ],
        payFrequencyCode: [
          { required: true, message: "请选择收费频率", trigger: "change" }
        ],
        ruleType: [
          { required: true, message: "请选择收费规则", trigger: "change" }
        ],
        maleAgeMin: [{ validator: checkAge, trigger: "blur" }],
        maleAgeMax: [{ validator: checkAge, trigger: "blur" }],
        femaleAgeMax: [{ validator: checkAge, trigger: "blur" }],
        compCalAccuCode: [
          { required: true, message: "请选择单位精确度", trigger: "change" }
        ],
        empCalAccuCode: [
          { required: true, message: "请选择个人精确度", trigger: "change" }
        ],
        compBaseMin: [
          { validator: checkMaxInput, required: true, trigger: "blur" }
        ],
        compRatio: [
          {
            required: true,
            validator: validateOverdueFineRatio,
            trigger: "blur"
          }
        ],
        empBaseMin: [
          { validator: checkPersonalMaxInput, required: true, trigger: "blur" }
        ],
        empRatio: [
          {
            required: true,
            validator: validateOverdueFineRatio,
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getType();
    this.getOtherTypes();
  },
  methods: {
    action() {
      Http.api
        .get("/case/accfunditembycode", {
          params: {
            productId: this.$route.query.productId,
            code: this.item.itemTypeCode
          }
        })
        .then(r => {
          this.item = r.data;
        });
    },
    getType() {
      Http.api.get("dict", { params: { key: 40007 } }).then(res => {
        this.types = res.data;
      });
    },
    getOtherTypes() {
      Http.api
        .get("case/accfundproduct/codes", {
          params: { productId: this.$route.query.productId }
        })
        .then(res => {
          this.otherTypes = res.data;
          if (this.otherTypes.length != 0) {
            this.radioInsurance = this.otherTypes[0];
            this.edit();
          }
        });
    },
    // 保存
    save() {
      this.$refs["item"].validate(v => {
        console.log(v, this.item);
        if (v) {
          if (!this.item.productId || this.item.productId == null) {
            this.item.productId = this.productId;
          }

          Http.api.post("/case/accfunditem", this.item).then(r => {
            this.$router.push({
              path: "/case/editFund",
              query: { id: this.$route.query.productId }
            });
          });
        }
      });
    },
    delete() {},
    edit() {
      Http.api
        .get("/case/accfunditembycode", {
          params: {
            productId: this.$route.query.productId,
            code: this.radioInsurance
          }
        })
        .then(r => {
          this.item = r.data;
        });
    },
    delXz() {
      this.$confirm("确认删除险种吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true,
        type: "warning"
      })
        .then(() => {
          Http.api
          .get("/case/deleteAccfunCode", {
            params: {
              productId: this.$route.query.productId,
              code: this.radioInsurance
            }
          })
          .then(r => {
            this.getOtherTypes();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
